<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=9Hl6gsN9gRvke7QGtEb7R6ZikNDGhakD"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	var map = new BMapGL.Map("allmap");    // 创建Map实例
  var point = new BMapGL.Point(116.404, 39.915);
	map.centerAndZoom(point, 12);
	// map.enableScrollWheelZoom(true);
	map.setMapStyleV2({     
  	styleId: '556b6c846f130ec3ad0016f2eba410f6'
	});
	// var marker = new BMapGL.Marker(point);        // 创建标注   
	// map.addOverlay(marker);                     // 将标注添加到地图中
	var myIcon = new BMapGL.Icon("https://www.youbaobao.xyz/datav-res/datav/location.png", 
	  new BMapGL.Size(60, 60), {
			anchor: new BMapGL.Size(30, 30),
			imageOffset: new BMapGL.Size(0, 0)
		}
	);
	// 创建标注对象并添加到地图  
	var marker = new BMapGL.Marker(point, { icon: myIcon });
	marker.addEventListener("click", function(){   
    var opts = {
    	width: 250,     // 信息窗口宽度
    	height: 100,    // 信息窗口高度
    	title: "标题",  // 信息窗口标题
		}
		var infoWindow = new BMapGL.InfoWindow("内容", opts);  // 创建信息窗口对象
		map.openInfoWindow(infoWindow, point);        // 打开信息窗口
	});
	map.addOverlay(marker); 
	var polyline = new BMapGL.Polyline([
		new BMapGL.Point(116.399, 39.800),
		new BMapGL.Point(116.405, 39.810),
		new BMapGL.Point(116.425, 39.820)
	], {
		strokeColor: "blue",
		strokeWeight: 2,
		strokeOpacity: 0.5
	});
	map.addOverlay(polyline);
	var content = "欢迎学习数据可视化体系课";
	var label = new BMapGL.Label(content, {       // 创建文本标注
		position: point,                          // 设置标注的地理位置
		offset: new BMapGL.Size(200, 20)           // 设置标注的偏移量
	});
	label.setStyle({                              // 设置label的样式
    width: '100px',
		height: '20px',
		padding: '20px',
		color: '#fff',
    fontSize: '20px',
    border: '2px solid #1E90FF',
		background: 'red',
		whiteSpace: 'wrap',
		overflow: 'hidden',
		lineHeight: '20px'
	});
	label.addEventListener('click', function(e) {
		alert(e.target.content);
	});
	map.addOverlay(label);                        // 将标注添加到地图中
</script>
